<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>throttle & debounce</title>
  </head>

  <body style="display: flex">
    <div id="input" style="width: 70%">
      <h1>输入事件</h1>
      <input type="text" />
    </div>
    <div id="mousewheel" style="width: 30%">
      <h1>滚轮滚动事件</h1>
    </div>
  </body>

  <script>
    /**
     * @description 节流函数
     * @param {Function} func 需要节流的函数
     * @param {Number} delay 节流的时间
     * @returns {Function} 返回节流后的函数
     */
    function throttle(func, delay) {
      let timer = null
      return function () {
        if (timer) return
        timer = setTimeout(() => {
          func.apply(this, arguments)
          timer = null
        }, delay)
      }
    }
    /**
     * @description 防抖函数
     * @param {Function} func 需要防抖的函数
     * @param {Number} delay 防抖的时间
     * @returns {Function} 返回防抖后的函数
     */
    function debounce(func, delay) {
      let timer
      return function () {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
          func.apply(this, arguments)
        }, delay)
      }
    }
  </script>
  <!-- input 使用示例 -->
  <script>
    // 获取 input 元素
    const input = document.querySelector('input')

    // 默认执行频率
    // input.addEventListener('input', handleInput)

    // 节流执行频率
    // input.addEventListener('input', throttle(handleInput, 500))

    // 防抖执行频率
    input.addEventListener('input', debounce(handleInput, 500))

    // 打印输入的文本
    function handleInput(event) {
      const { value } = event.target

      let container = document.querySelector('#input')

      let div = document.createElement('div')
      container.appendChild(div).innerHTML = `输入了：${value}`
    }
  </script>
  <!-- mousewheel 使用示例 -->
  <script>
    // 页面总数
    let pageTotal = 5
    // 当前索引
    let pageIndex = 0

    // 处理滚动事件
    function handleMouseScroll(e) {
      const { wheelDelta } = e
      if (wheelDelta > 0) {
        // 向上滚动
        if (pageIndex > 0) {
          pageIndex--
        } else {
          pageIndex = pageTotal
        }
      } else if (wheelDelta < 0) {
        // 向下滚动
        if (pageIndex < pageTotal) {
          pageIndex++
        } else {
          pageIndex = 0
        }
      }
      // 测试是否正确
      let container = document.querySelector('#mousewheel')

      let div = document.createElement('div')
      container.appendChild(div).innerHTML = `当前页码：${pageIndex}`
    }

    // 默认执行频率
    // document.addEventListener('mousewheel', handleMouseScroll)

    // 节流执行频率
    window.onmousewheel = throttle(handleMouseScroll, 500)

    // 防抖执行频率
    // window.onmousewheel = debounce(handleMouseScroll, 500)
  </script>
</html>
